<template>
  <div>
    <div
      v-if="title && fileList && fileList.length > 0"
      :style="visual.parseFontStyle(props.compStyle)"
    >{{title}}</div>
    <span
      v-if="!showPdf"
      v-for="(item, index) in fileList"
      class="cc-file"
      :key="index"
    >
      <span class="cc-file-item">
        <span class="cc-file-name" :title="item.name">
          <span style="cursor: pointer">
            <span>{{item.name}}</span>
          </span>
        </span>
        <span class="cc-file-download">
          <cc-icon
            style="color: #409EFF;font-size: 16px;"
            iconId="018dc9c3efed1f464d38"
            title="下载"
          />
        </span>
      </span>
    </span>
    <div v-else>
      <iframe
        :style="`width:${width};height:${width};min-height:900px;border:none`"
        :src="pdfUrl"
      ></iframe>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import visual from "@/visual/js/visual";

const props = defineProps({
  node: Object,
  compStyle: Object,
  compData: Object,
  inputParam: Object
});
const currNode = ref(props.node);
const fileList = ref([{name: '测试文件.pdf'}]);
const title = ref('');
const showPdf = ref(false);
const width = ref('');
const height = ref('');
const pdfUrl = ref('');

const init = async() => {
  title.value = currNode.value.currCompStyle['title'] || '';
  showPdf.value = currNode.value.currCompStyle['showPdf'] || false;
  width.value = currNode.value.currCompStyle['width'] || '';
  height.value = currNode.value.currCompStyle['height'] || '';
};

watch(() => props.compStyle, () => {
  init();
}, {deep: true});

onMounted(() => {
  init();
});
</script>

<style scoped>
.cc-file {
  width: 100%;
  line-height: 25px;
}
.cc-file-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.cc-file-name {
  overflow: hidden;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cc-file-name > div {
  margin-right: 8px;
}

.cc-file-name > div > div {
  display: flex;
  height: 18px;
  align-items: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.cc-file-download {
  font-size: 18px;
  cursor: pointer;
  margin-left: 5px;
  width: 25px;
}
.cc-file-download:hover {
  color: #409EFF;
}
</style>
